<template>
	<div class="table-box">
		<ProTable
			ref="proTable"
			title="菜单列表"
			row-key="menu_id"
			:columns="columns"
			:pagination="false"
			:request-api="getMenuListApi"
		>
			<!-- 表格 header 按钮 -->
			<template #tableHeader>
				<el-button type="primary" :icon="CirclePlus" @click="openDialog('新增', {})">新增菜单</el-button>
			</template>
			<!-- 菜单图标 -->
			<template #icon="scope">
				<el-icon :size="18">
					<component :is="scope.row.icon"></component>
				</el-icon>
			</template>
			<!-- 表格操作 -->
			<template #operation="scope">
				<el-button type="primary" link :icon="View" @click="openDialog('查看', scope.row)">查看</el-button>
				<el-button type="primary" link :icon="EditPen" @click="openDialog('编辑', scope.row)">编辑</el-button>
				<el-button type="primary" link :icon="Delete" @click="deleteMenu(scope.row)">删除</el-button>
				<!-- 判断：如果是子级目录，则显示按钮权限 -->
				<el-button type="primary" link :icon="Setting" v-if="scope.row.component" @click="authButtonClick(scope.row)"
					>按钮权限</el-button
				>
			</template>
		</ProTable>
		<MenuDialog ref="menuDialogRef"></MenuDialog>
		<el-dialog v-model="authVisible" :title="authTitle" :destroy-on-close="true" width="50%" draggable>
			<el-button type="primary" :icon="CirclePlus" @click="addAuth" style="margin-bottom: 10px">新增按钮权限</el-button>
			<el-table :data="authDatas" border>
				<el-table-column label="序号" align="center" width="80">
					<template #default="scope">
						<span>{{ scope.$index + 1 }}</span>
					</template>
				</el-table-column>
				<el-table-column label="按钮名称" prop="authName" align="center">
					<template #default="scope">
						<el-input v-if="scope.row.isEdit" v-model="scope.row.authName" placeholder="请输入按钮名称"></el-input>
						<el-text v-else>{{ scope.row.authName }}</el-text>
					</template>
				</el-table-column>
				<el-table-column label="权限标识" prop="authPermission" align="center">
					<template #default="scope">
						<el-input v-if="scope.row.isEdit" v-model="scope.row.authPermission" placeholder="请输入权限标识"></el-input>
						<el-text v-else>{{ scope.row.authPermission }}</el-text>
					</template>
				</el-table-column>
				<el-table-column label="排序" prop="authOrder" align="center">
					<template #default="scope">
						<el-input v-if="scope.row.isEdit" v-model="scope.row.authOrder" placeholder="请输入排序"></el-input>
						<el-text v-else>{{ scope.row.authOrder }}</el-text>
					</template>
				</el-table-column>
				<el-table-column label="操作" align="center" width="150">
					<template #default="scope">
						<el-button type="primary" link :icon="EditPen" @click="editAuth(scope.row)">编辑</el-button>
						<el-button type="primary" link :icon="Delete" @click="deleteAuth(scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="authVisible = false">取消</el-button>
					<el-button type="primary" @click="handleAuthSubmit"> 确认 </el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name="MenuManage">
import { ColumnProps } from "@/components/ProTable/interface";
import ProTable from "@/components/ProTable/index.vue";
import { deleteMenuApi, getMenuListApi } from "@/api/modules/test/menu";
import { CirclePlus, Delete, EditPen, Download, Upload, View, Refresh, Setting } from "@element-plus/icons-vue";
import MenuDialog from "./components/MenuDialog.vue";
import { ref } from "vue";
import { useHandleData } from "@/hooks/useHandleData";
import { addMenuApi, getMenuTreeApi } from "@/api/modules/test/menu";

// 表单配置项
const columns: ColumnProps[] = [
	{ type: "index", label: "序号", width: 150 },
	{ prop: "menuName", label: "菜单名称", align: "left", search: { el: "input" } },
	{ prop: "name", label: "菜单别名", search: { el: "input" } },
	{ prop: "icon", label: "菜单图标" },
	{ prop: "url", label: "路由地址", width: 300, search: { el: "input" } },
	{ prop: "component", label: "组件路径", width: 300, search: { el: "input" } },
	{ prop: "orderNum", label: "排序" },
	{ prop: "operation", label: "操作", width: 350, fixed: "right" }
];

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref();

// 打开drawer(新增，修改，查看)
const menuDialogRef = ref<InstanceType<typeof MenuDialog> | null>(null);
const openDialog = async (title: string, row: {}) => {
	const params = {
		title,
		isView: title === "查看",
		row: { ...row },
		getTableList: proTable.value.getTableList
	};
	menuDialogRef.value?.acceptParams(params);
};

// 删除菜单信息
const deleteMenu = async (val: any) => {
	await useHandleData(deleteMenuApi, { menu_id: val.menu_id }, "删除菜单");
	proTable.value.getTableList();
};

// 按钮权限弹窗
const authVisible = ref(false);
const authTitle = ref<string>("");

interface authType {
	authName: string;
	authPermission: string;
	authOrder: string;
	isEdit: boolean; // 此行是否编辑
}
const authDatas = ref<authType[]>([]);

// 选中的菜单行数据
const selectMenuRow = ref({});
// 编辑按钮权限
const authButtonClick = async (val: any) => {
	authVisible.value = true;
	authTitle.value = val.menu_name;
	selectMenuRow.value = val;
};

//添加权限按钮
const addAuth = async () => {
	authDatas.value.push({
		authName: "",
		authPermission: "",
		authOrder: "",
		isEdit: true
	});
};

// 编辑按钮权限
const editAuth = async (val: any) => {
	val.isEdit = !val.isEdit;
};

// 删除按钮权限
const deleteAuth = async (val: any) => {
	authDatas.value.forEach(function (item, index, arr) {
		if (item == val) {
			arr.splice(index, 1);
		}
	});
};

// 提交按钮权限
const handleAuthSubmit = async () => {
	console.log("提交权限： ", selectMenuRow, authDatas);
};
</script>